﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title data-lang="AdminIndex.Blackground_ManageMent"></title>

    <script src="../WFRes/_Scripts/jquery/jquery.js?v=1.12.4"></script>

    <script type="text/javascript">
		$(document).ready(function(){
			$("#base").on("click",function(){
				$(this).addClass("active").siblings().removeClass("active");
				$(".content_node").hide();
				$("#save1").show();
				$("#save2").hide();
				$(".content_base").show();
			})
			$("#node").on("click",function(){
				$(this).addClass("active").siblings().removeClass("active");
				$(".content_base").hide();
				$("#save2").show();
				$("#save1").hide();
				$(".content_node").show();
			})
			var flag = true;
			$(".select").on("click",function(){
				var _this = $(this);
				if(flag){
					flag = false;
					$(this).find(".dropdownlist").show();
					$(this).find(".dropdown").css("background","#eee");
					$(this).find(".dropdownlist li").on("click",function(){
						_this.find(".dropdown").text($(this).text());
					});
					$(this).find(".dropdownlist li").hover(function(){
						$(this).css("background","#3498DB");
					},function(){
						$(this).css("background","#fff");
					})
				}else{
					flag = true;
					$(this).find(".dropdownlist").hide();
					$(this).find(".dropdown").css("background","#fff");
				}
			})
			var flag1 = true;
			$(".drop").on("click",function(){
				var _this = $(this);
				if(flag1){
					flag1 = false;
					$(this).siblings(".dropdownlist").show();
					$(this).css("background","#eee");
					$(this).siblings(".dropdownlist li").on("click",function(){
						_this.val($(this).text());
					});
					$(this).siblings(".dropdownlist li").hover(function(){
						$(this).css("background","#3498DB");
					},function(){
						$(this).css("background","#fff");
					})
				}else{
					flag1 = true;
					$(this).siblings(".dropdownlist").hide();
					$(this).css("background","#fff");
				}
			})
			//切换表格
			$(".items").on("click",function(){
				$(this).addClass("active").siblings().removeClass("active");
				if($(this).index() == 0){
					$(".table2").hide();
					$(".table1").show();
				}else{
					$(".table1").hide();
					$(".table2").show();
				}	
			});
			var thingData = {};
			$("#save1").on("click",function(){
				thingData = {"thingNum":$("#thingNum").val(),"thingName":$("#thingName").val()};
				
				
			});
			$("#save2").on("click",function(){
				var tables1 = [];
				var tables2 = [];
				for(var i =0; i<$(".nodeText1").length;i++){
					if($(".nodeText1")[i].value){
						tables1.push($(".nodeText1")[i].value);
					}
				}
				for(var i =0; i<$(".nodeText").length;i++){
					if($(".nodeText")[i].value){
						tables2.push($(".nodeText")[i].value);
					}
				}
//				;
				var tableData = {
                    "activityArray1":tables1,
                    "activityArray2":tables2,
                    "schemaCode":$("#thingNum").val(),
                    "displayName":$("#thingName").val()
				};
				$.ajax({
			           url: '../WorkflowPackageImport/CreateWorkFlow',
			           //url: WorkflowPackageImport/Export
			           type: 'POST',
			           dataType: "json",
			           data: JSON.stringify(tableData),
                       contentType:"application/json",
			           //async: false,//同步执行
			           success: function (result) {
			        	   
			           },
			           error: function(err){
			        	  
			           }
			       }); 	
			});
		});
    </script>
<style>
*{
	padding:0;
	margin:0;
}
.contain{
	width:70%;
	margin:0 auto;
}
.nav{
	width:100%;
	height:50px;
	border-bottom:1px solid #ccc;
}
.navbar .nav_list{
	width:160px;
	height:48px;
	float:left;
	color:#999999;
	border-width:0;
	cursor:pointer;
	font-weight:700;
	font-size:16px;
	text-align:center;
	list-style:none;
	line-height:50px;
}
.red{
	color:red;
}
.left{
	width:350px;
}
.right{
	width:350px;
	height:500px;
	margin-left:60px;
}
.fl{
	float:left;
}
.fr{
	float:right;
}
.form_group{
	width:350px;
	height:40px;
	margin-top:7px;
	margin-bottom:7px;
	line-height:40px;
	position:relative;
}
.form_group input.text{
	height:36px;
	width:199px;
	border-radius:2px;
	border:1px solid #ccc;
	padding-left:10px;
}
.form_group .dropdownlist{
	left:140px;
	width:208px;
	overflow-y:scroll;
}
#sanjiao{
	position:absolute;
	top:15px;
	right:10px;
}
.textarea_group{
	overflow:hidden;
	width:350px;
	height:80px;
	margin-top:7px;
	margin-bottom:7px;
	line-height:40px;
	position:relative;
}
.textarea_group .textarea{
	height:76px;
	width:199px;
	padding-left:10px;
	border-radius:2px;
	border:1px solid #ccc;
}
.button{
	width:180px;
}
.button_list{
	width:92px;
	height:26px;
	background:#3498DB;
	cursor:pointer;
	border-radius:2px;
	border:none;
	color:#ffffff;
	margin-left:40px;
	margin-top:20px;
}
.active{
	border-bottom:2px solid  #3498DB !important;
}
.node_button{
	margin-left:10px;
	margin-bottom:20px;
}
.navborder{
	overflow:hidden;
}
.navborder .nav_list{
	border-bottom:1px solid #ccc;
}
.table{
	width:602px;
	height:472px;
	margin-top:10px;
	border-collapse: collapse;
}
td,th{
	border:1px solid #ccc;
}
th{
	width:150px !important;
	height:60px !important;
}
td{
	height:40px;
}
td>input{
	border:none;
	outline:none;
	height:40px;
	text-align:center;
}
.dropdownlist{
	position:absolute;
	top:40px;
	width:148px;
	height:120px;
	list-style:none;
	background:#fff;
	border:1px solid #ccc;
	display:none;
	z-index:34;
}
.dropdownlist li{
	height:40px;
	line-height:40px;
	padding-left:15px;
}
.dropdown{
	width:135px;
	height:40px;
	padding-left:15px;
	line-height:40px;
}
 .select{
	position:relative;
	width:150px;
	height:40px;
}
.buttonwrap{
	width:100px;
}
</style>

</head>
<body>
<div class="contain">
	<div class="nav">
		<ul class="navbar">
			<li id="base" class="nav_list active">基本信息</li>
			<li id="node" class="nav_list">节点信息</li>
			<li class="nav_list">对应流程信息</li>
		</ul>
		<button id="save1" class="button_list fr" style="margin-top:10px;">保存</button>
		<button id="save2" class="button_list fr" style="margin-top:10px;display:none;">生成流程</button>
		<button class="button_list fr" style="margin-top:10px;">返回</button>
		<div id=""></div>
	</div>
	<div class="content_base">
		<div class="left fl">
			<div class="form_group">
				<p class="fl">
					<span class="red">*</span>
					<span>权责事项编号</span>
				</p>
				<input type="text" id="thingNum" placeholder="QZTZ-01-01" class="text fr"/>
			</div>
			<div class="form_group">
				<p class="fl">
					<span class="red">*</span>
					<span>权责事项名称</span>
				</p>
				<input type="text" id="thingName" placeholder="集团目标区域" class="text fr"/>
			</div>
			<div class="form_group">
				<p class="fl">
					<span class="red">*</span>
					<span>归属部门</span>
				</p>
				<input type="text" placeholder="投资拓展管理"  class="text fr drop"/>
				<img id="sanjiao" src="u4390.png">
				<ul class="dropdownlist">
					<li>部门1</li>
					<li>部门2</li>
					<li>部门3</li>
					<li>部门4</li>
					<li>部门5</li>
					<li>部门6</li>
				</ul>
			</div>
			<div class="form_group">
				<p class="fl">
					<span class="red">*</span>
					<span>所属分类</span>
				</p>
				<input type="text" placeholder="一、投资策略"  class="text fr drop"/>
				<img id="sanjiao" src="u4390.png">
				<ul class="dropdownlist">
					<li>分类1</li>
					<li>分类2</li>
					<li>分类3</li>
					<li>分类4</li>
					<li>分类5</li>
					<li>分类6</li>
					<li>分类7</li>
					<li>分类8</li>
				</ul>
			</div>
			<div class="form_group">
				<p class="fl">
					<span class="red">*</span>
					<span>使用表单</span>
				</p>
				<input type="text" placeholder="请选择表单" class="text fr drop"/>
				<img id="sanjiao" src="u4390.png">
				<ul class="dropdownlist">
					<li>合同评审表</li>
					<li>用款申请报告 </li>
					<li>保密协议审核表</li>
				</ul>
			</div>
			<div class="form_group">
				<p class="fl">
					<span class="red">*</span>
					<span>开展过程</span>
				</p>
				<input type="text" placeholder="请选择开展过程" class="text fr"/>
				<img id="sanjiao" src="u4390.png">
			</div>
			<div class="textarea_group">
				<p class="fl">
					<span class="red">*</span>
					<span>事项说明</span>
				</p>
				<input type="text" placeholder="集团目标区域发展战略" class="textarea fr"/>
			</div>
			<div class="textarea_group">
				<p class="fl">
					<span class="red">*</span>
					<span>依据文件</span>
				</p>
				<input type="text" placeholder="请输入依据文件" class="textarea fr"/>
			</div>
		</div>
		<div class="right fl">
			<div class="textarea_group">
				<p class="fl">
					<span class="red">*</span>
					<span>前置事项列表</span>
				</p>
				<input type="text" placeholder="请输入前置事项列表" class="textarea fr"/>
			</div>
			<div class="textarea_group">
				<p class="fl">
					<span class="red">*</span>
					<span>后置事项列表</span>
				</p>
				<input type="text" placeholder="请输入后置事项列表" class="textarea fr"/>
			</div>
		</div>
		<div class="button fl">
			<button class="button_list fl">选择</button>
			<button class="button_list fl">删除</button>
			<button class="button_list fl">选择</button>
			<button class="button_list fl">删除</button>
		</div>
	</div>
	<div class="content_node" style="display:none;">
		<div class="node_head">
			<button class="button_list node_button">添加条件</button>
			<ul class="navbar navborder">
				<li id="tablebase" class="items nav_list">≤20万</li>
				<li id="tablenode" class="items nav_list">20万＜X≤50万</li>
				<li class="items nav_list">50万＜X≤200万</li>
				<li class="items nav_list">50万＜X≤200万</li>
			</ul>
		</div>
		<div class="node_table">
			<table class="table fl table1">
				<thead>
				<tr>
					<th>节点</th>
					<th>参与方式</th>
					<th>对应部门模版</th>
					<th>标准工时</th>
				</tr>
				</thead>
				<tr>
					<td><input type="text" class="nodeText1"/></td>
					<td><input type="text" class="joinText"/></td>
					<td class="select">
						<div class="dropdown templateText">模版一</div>
						<img id="sanjiao" src="u4390.png">
						<ul class="dropdownlist">
							<li>模版一</li>
							<li>模版二</li>
							<li>模版三</li>
						</ul>
					</td>
					<td><input type="text" class="timeText"/></td>
				</tr>
				<tr>
					<td><input type="text" class="nodeText1"/></td>
					<td><input type="text" class="joinText"/></td>
					<td class="select">
						<div class="dropdown templateText">部门模版</div>
						<img id="sanjiao" src="u4390.png">
						<ul class="dropdownlist">
							<li>模版一</li>
							<li>模版二</li>
							<li>模版三</li>
						</ul>
					</td>
					<td><input type="text" class="timeText"/></td>
				</tr>
				<tr>
					<td><input type="text" class="nodeText1"/></td>
					<td><input type="text" class="joinText"/></td>
					<td class="select">
						<div class="dropdown templateText">部门模版</div>
						<img id="sanjiao" src="u4390.png">
						<ul class="dropdownlist">
							<li>模版一</li>
							<li>模版二</li>
							<li>模版三</li>
						</ul>
					</td>
					<td><input type="text" class="timeText"/></td>
				</tr>
				<tr>
					<td><input type="text" class="nodeText1"/></td>
					<td><input type="text" class="joinText"/></td>
					<td class="select">
						<div class="dropdown templateText">部门模版</div>
						<img id="sanjiao" src="u4390.png">
						<ul class="dropdownlist">
							<li>模版一</li>
							<li>模版二</li>
							<li>模版三</li>
						</ul>
					</td>
					<td><input type="text" class="timeText"/></td>
				</tr>
				<tr>
					<td><input type="text" class="nodeText1"/></td>
					<td><input type="text" class="joinText"/></td>
					<td class="select">
						<div class="dropdown templateText">部门模版</div>
						<img id="sanjiao" src="u4390.png">
						<ul class="dropdownlist">
							<li>模版一</li>
							<li>模版二</li>
							<li>模版三</li>
						</ul>
					</td>
					<td><input type="text" class="timeText"/></td>
				</tr>
				<tr>
					<td><input type="text" class="nodeText1"/></td>
					<td><input type="text" class="joinText"/></td>
					<td class="select">
						<div class="dropdown templateText">部门模版</div>
						<img id="sanjiao" src="u4390.png">
						<ul class="dropdownlist">
							<li>模版一</li>
							<li>模版二</li>
							<li>模版三</li>
						</ul>
					</td>
					<td><input type="text" class="timeText"/></td>
				</tr>
				<tr>
					<td><input type="text" class="nodeText1"/></td>
					<td><input type="text" class="joinText"/></td>
					<td class="select">
						<div class="dropdown templateText">部门模版</div>
						<img id="sanjiao" src="u4390.png">
						<ul class="dropdownlist">
							<li>模版一</li>
							<li>模版二</li>
							<li>模版三</li>
						</ul>
					</td>
					<td><input type="text" class="timeText"/></td>
				</tr>
				<tr>
					<td><input type="text" class="nodeText1"/></td>
					<td><input type="text" class="joinText"/></td>
					<td class="select">
						<div class="dropdown templateText">部门模版</div>
						<img id="sanjiao" src="u4390.png">
						<ul class="dropdownlist">
							<li>模版一</li>
							<li>模版二</li>
							<li>模版三</li>
						</ul>
					</td>
					<td><input type="text" class="timeText"/></td>
				</tr>
				<tr>
					<td><input type="text" class="nodeText1"/></td>
					<td><input type="text" class="joinText"/></td>
					<td class="select">
						<div class="dropdown templateText">部门模版</div>
						<img id="sanjiao" src="u4390.png">
						<ul class="dropdownlist">
							<li>模版一</li>
							<li>模版二</li>
							<li>模版三</li>
						</ul>
					</td>
					<td><input type="text" class="timeText"/></td>
				</tr>
				<tr>
					<td><input type="text" class="nodeText1"/></td>
					<td><input type="text" class="joinText"/></td>
					<td class="select">
						<div class="dropdown templateText">部门模版</div>
						<img id="sanjiao" src="u4390.png">
						<ul class="dropdownlist">
							<li>模版一</li>
							<li>模版二</li>
							<li>模版三</li>
						</ul>
					</td>
					<td><input type="text" class="timeText"/></td>
				</tr>
			</table>
			<table class="table fl table2" style="display:none;">
				<thead>
				<tr>
					<th>节点</th>
					<th>参与方式</th>
					<th>对应部门模版</th>
					<th>标准工时</th>
				</tr>
				</thead>
				<tr>
					<td><input type="text" class="nodeText"/></td>
					<td><input type="text" class="joinText"/></td>
					<td class="select">
						<div class="dropdown templateText">模版一</div>
						<img id="sanjiao" src="u4390.png">
						<ul class="dropdownlist">
							<li>模版一</li>
							<li>模版二</li>
							<li>模版三</li>
						</ul>
					</td>
					<td><input type="text" class="timeText"/></td>
				</tr>
				<tr>
					<td><input type="text" class="nodeText"/></td>
					<td><input type="text" class="joinText"/></td>
					<td class="select">
						<div class="dropdown templateText">部门模版</div>
						<img id="sanjiao" src="u4390.png">
						<ul class="dropdownlist">
							<li>模版一</li>
							<li>模版二</li>
							<li>模版三</li>
						</ul>
					</td>
					<td><input type="text" class="timeText"/></td>
				</tr>
				<tr>
					<td><input type="text" class="nodeText"/></td>
					<td><input type="text" class="joinText"/></td>
					<td class="select">
						<div class="dropdown templateText">部门模版</div>
						<img id="sanjiao" src="u4390.png">
						<ul class="dropdownlist">
							<li>模版一</li>
							<li>模版二</li>
							<li>模版三</li>
						</ul>
					</td>
					<td><input type="text" class="timeText"/></td>
				</tr>
				<tr>
					<td><input type="text" class="nodeText"/></td>
					<td><input type="text" class="joinText"/></td>
					<td class="select">
						<div class="dropdown templateText">部门模版</div>
						<img id="sanjiao" src="u4390.png">
						<ul class="dropdownlist">
							<li>模版一</li>
							<li>模版二</li>
							<li>模版三</li>
						</ul>
					</td>
					<td><input type="text" class="timeText"/></td>
				</tr>
				<tr>
					<td><input type="text" class="nodeText"/></td>
					<td><input type="text" class="joinText"/></td>
					<td class="select">
						<div class="dropdown templateText">部门模版</div>
						<img id="sanjiao" src="u4390.png">
						<ul class="dropdownlist">
							<li>模版一</li>
							<li>模版二</li>
							<li>模版三</li>
						</ul>
					</td>
					<td><input type="text" class="timeText"/></td>
				</tr>
				<tr>
					<td><input type="text" class="nodeText"/></td>
					<td><input type="text" class="joinText"/></td>
					<td class="select">
						<div class="dropdown templateText">部门模版</div>
						<img id="sanjiao" src="u4390.png">
						<ul class="dropdownlist">
							<li>模版一</li>
							<li>模版二</li>
							<li>模版三</li>
						</ul>
					</td>
					<td><input type="text" class="timeText"/></td>
				</tr>
				<tr>
					<td><input type="text" class="nodeText"/></td>
					<td><input type="text" class="joinText"/></td>
					<td class="select">
						<div class="dropdown templateText">部门模版</div>
						<img id="sanjiao" src="u4390.png">
						<ul class="dropdownlist">
							<li>模版一</li>
							<li>模版二</li>
							<li>模版三</li>
						</ul>
					</td>
					<td><input type="text" class="timeText"/></td>
				</tr>
				<tr>
					<td><input type="text" class="nodeText"/></td>
					<td><input type="text" class="joinText"/></td>
					<td class="select">
						<div class="dropdown templateText">部门模版</div>
						<img id="sanjiao" src="u4390.png">
						<ul class="dropdownlist">
							<li>模版一</li>
							<li>模版二</li>
							<li>模版三</li>
						</ul>
					</td>
					<td><input type="text" class="timeText"/></td>
				</tr>
				<tr>
					<td><input type="text" class="nodeText"/></td>
					<td><input type="text" class="joinText"/></td>
					<td class="select">
						<div class="dropdown templateText">部门模版</div>
						<img id="sanjiao" src="u4390.png">
						<ul class="dropdownlist">
							<li>模版一</li>
							<li>模版二</li>
							<li>模版三</li>
						</ul>
					</td>
					<td><input type="text" class="timeText"/></td>
				</tr>
				<tr>
					<td><input type="text" class="nodeText"/></td>
					<td><input type="text" class="joinText"/></td>
					<td class="select">
						<div class="dropdown templateText">部门模版</div>
						<img id="sanjiao" src="u4390.png">
						<ul class="dropdownlist">
							<li>模版一</li>
							<li>模版二</li>
							<li>模版三</li>
						</ul>
					</td>
					<td><input type="text" class="timeText"/></td>
				</tr>
			</table>
		<div class="buttonwrap fl">
			<button class="button_list node_btn">添加节点</button>
			<button class="button_list node_btn">删除节点</button>
		</div>
	</div>
</div>
   
</body>
</html>
